{include file="public/header" /}
<style>
    .layui-input-block{width: 80%}
    .layui-form-radio>.lay-skin-tag,
    .layui-form-checkbox>.lay-skin-tag{
        font-size: 13px;
        border-radius: 5px;
        height: 25px;
        line-height: 25px;
        margin-top: 7px;
        margin-right: 10px;
        color: #fff !important;
        background: #d2d2d2 !important;
    }
    .layui-form-checked>.lay-skin-tag,
    .layui-form-radioed>.lay-skin-tag {
        background-color: #16b777 !important;
    }
</style>
<body>
<div class="x-body">
    <form action="{:url('save')}" class="layui-form" id="form">
        <input type="hidden" name="id" value="{$info?$info.id:''}"/>
        <div class="layui-form-item">
            <label class="layui-form-label">题目 </label>
            <div class="layui-input-block">
                <input type="text" name="title" value="{$info?$info.title:''}" placeholder="请输入题目" lay-verify="required"
                       class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">分类</label>
            <div class="layui-input-block">
                {volist name="cate" id="vo" key="k"}
                <input type="radio" name="cate" value="{$vo.id}" title="{$vo.title}" lay-skin="none" {notempty name="info"}{if $info.cate == $vo.id} checked {/if} {/notempty}>
                <div lay-radio class="lay-skin-tag layui-badge">{$vo.title}</div>
                {/volist}
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">A </label>
            <div class="layui-input-block">
                <input type="text" name="A" value="{$info?$info.A:''}" placeholder="请输入A选项" lay-verify="required"
                       class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">B </label>
            <div class="layui-input-block">
                <input type="text" name="B" value="{$info?$info.B:''}" placeholder="请输入B选项" lay-verify="required"
                       class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">C </label>
            <div class="layui-input-block">
                <input type="text" name="C" value="{$info?$info.C:''}" placeholder="请输入C选项" lay-verify="required"
                       class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">D </label>
            <div class="layui-input-block">
                <input type="text" name="D" value="{$info?$info.D:''}" placeholder="请输入D选项" class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">E </label>
            <div class="layui-input-block">
                <input type="text" name="E" value="{$info?$info.E:''}" placeholder="请输入E选项" class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label req">图片</label>
            <div class="layui-input-block">
                <?php $data = isset($info)?$info:[];?>
                {table:alone view='items/img' info='$data' form='["field" => "images", "value" => 5]'/}
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">题目类型</label>
            <div class="layui-input-block">
                <input type="radio" name="types" value="1" lay-filter="type_radio" lay-verify="required"  id="types_1" lay-skin="none" {notempty name="info"}{if $info.types == 1} checked {/if} {/notempty}>
                <div lay-radio class="lay-skin-tag layui-badge">单选</div>
                <input type="radio" name="types" value="2" lay-filter="type_radio" lay-verify="required"  id="types_2" lay-skin="none"  {notempty name="info"}{if $info.types == 2} checked {/if} {/notempty}>
                <div lay-radio class="lay-skin-tag layui-badge">多选</div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">正确答案</label>
            <div class="layui-input-block">
                <div id="radio_answer">
                    {volist name="radio_answer" id="vo" key="k"}
                    <input type="radio" name="radio_answer" value="{$vo.title}"  lay-skin="none"  {if $vo.check == 1 } checked {/if}>
                    <div lay-radio class="lay-skin-tag layui-badge">{$vo.title}</div>
                    {/volist}
                </div>
                <div id="checkbox_answer">
                    <input type="hidden" name="checkbox_answer" id="answer" value="{$info?$info.answer:''}">
                    {volist name="checkbox_answer" id="vo" key="k"}
                    <input type="checkbox" value="{$vo.title}" lay-filter="answer_checkbox" lay-skin="none"  {if $vo.check == 1 } checked {/if}>
                    <div lay-checkbox class="lay-skin-tag layui-badge">{$vo.title}</div>
                    {/volist}
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <button class="layui-btn" lay-filter="save" lay-submit formObj="#form">保存</button>
        </div>
    </form>
</div>
</body>
{include file="public/footer" /}
<script>
$(function(){
    var types = "{$info?$info.types:''}";
    $('#checkbox_answer').hide();
    console.log(types);
    if(types == 1){
        $('#radio_answer').show();
    }else if(types == 2){
        $('#radio_answer').hide();
        $('#checkbox_answer').show();
    }
})
 layui.use(['layer', 'form'], function () {
    var layer = layui.layer
        ,form = layui.form
        , layarea = layui.layarea;
    form.on("radio(type_radio)", function(data){
        if(data.value==1){
            $('#radio_answer').show();
            $('#checkbox_answer').hide();
        }else{
            $('#radio_answer').hide();
            $('#checkbox_answer').show();
        }
    });
    form.on("checkbox(answer_checkbox)", function(data){
        var vals = [];
        $("#checkbox_answer input[type='checkbox']").each(function(){
            if($(this).is(':checked')){
                vals.push($(this).val());
            }
        });
        $("#answer").val(vals.join(','));
    });
});
</script>
</html>